<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue动画</title>
		<script src="../vue@3.2.23.js"></script>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
		<style>
			.content {
				width: 200px;
				height: 50px;
				background-color: bisque;
				line-height: 50px;
				text-align: center;
				transition: all 0.2s;
			}

			/* 动画 */
			@keyframes move {
				20% {
					transform: translateX(-20px)
				}

				40% {
					transform: translateX(20px)
				}

				60% {
					transform: translateX(-20px)
				}

				80% {
					transform: translateX(20px)
				}

				100% {
					transform: translateX(0px)
				}
			}

			.animate {
				animation: move 0.8s linear;
			}

			.transition {
				transition: all 0.8s;
			}

			/* 过度 */

			/* 进入动画 */
			.v-enter-from {
				opacity: 0;
			}

			.v-enter-active {
				transition: all 3s;
			}

			.v-enter-to {
				opacity: 1;
			}

			/* 离开动画 */
			.v-leave-from {
				opacity: 1;
			}

			.v-leave-active {
				transition: all 3s;
			}

			.v-leave-to {
				opacity: 0;
			}

			/* 进入动画 */
			.four-enter-from {
				opacity: 0;
				background-color: aliceblue;
			}

			.four-enter-active {
				transition: all 1s;
			}

			.four-enter-to {
				opacity: 1;
				background-color: bisque;
			}

			/* 离开动画 */
			.four-leave-from {
				opacity: 1;
				background-color: bisque;
			}

			.four-leave-active {
				transition: all 1s;
			}

			.four-leave-to {
				opacity: 0;
				background-color: aliceblue;
			}

			.v-move {
				transition: all 1s;
			}

			.num {
				display: inline-block;
				width: 20px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- <div ref="firstDiv" class="content" :class="className" @animationend="className.animate=false" :style="style">我是第一个动画</div>
			<div ref="secondDiv" class="content" :class="className" @animationend="className.animate=false" :style="style">我是第二个动画</div>
			 -->

			<!-- <transition>
				<div v-if="isShow" class="content" >我是第三个动画</div>
			</transition> -->
			<!-- 进入退出的生命周期函数 -->
			<!-- <transition name="four" @before-enter="life('before-enter')" @enter="life('enter')" @after-enter="life('after-enter')"
			@before-leave="life('before-leave')" @leave="life('leave')" @after-leave="life('after-leave')">
				<div v-if="isShow" class="content" >我是第四个动画</div>
			</transition> -->
			<!-- 禁用css动画：:css="false" -->
			<!-- <transition :css="false" @enter="life" @after-enter="endLife">
				<div v-if="isShow" class="content" >我是第五个动画</div>
			</transition> -->

			<!-- 结合三方css库使用，，网站：animate.style -->
			<!-- <transition enter-active-class="animate__animated animate__zoomIn" leave-active-class="animate__animated animate__slideOutDown">
				<div v-if="isShow" class="content" >我是第六个动画</div>
			</transition> -->

			<!-- 组件动画切换 -->
			<!--  appear="true"  设置开始动画 -->
			<transition mode="out-in" appear="true" enter-active-class="animate__animated animate__zoomIn"
				leave-active-class="animate__animated animate__zoomOut">
				<!-- 组件渲染标签 -->
				<component :is="componentName"></component>
			</transition>

			<!-- 列表动画 -->
			<transition-group enter-active-class="animate__animated animate__rotateIn"
				leave-active-class="animate__animated animate__zoomOut">
				<div class="num" v-for="val in numList" :key="val">{{val}}</div>
			</transition-group>

			<div class="but_box">
				<!-- 传递事件对象 -->
				<button @click="addNum">添加元素</button>
			</div>

			<div class="but_box">
				<!-- 传递事件对象 -->
				<button @click="startMove($event)">切换动画1</button>
			</div>
		</div>
	</body>
</html>
<script>
	const componentA = {
		template: `<div class="content" >我是第七个动画A</div>`
	}
	const componentB = {
		template: `<div class="content" >我是第七个动画B</div>`
	}
	const app = Vue.createApp({
		components: {
			componentA,
			componentB
		},
		data() {
			return {
				isShow: false,
				className: {
					'animate': false,
					transition: true
				},
				style: {
					'backgroundColor': 'bisque'
				},
				componentName: 'component-a',
				numList: [1, 2, 3].reverse()
			}
		},
		methods: {
			startMove(e) {
				// const rect = e.target.getBoundingClientRect()
				// console.log(rect);
				// // 获取所有的dom指向
				// console.log(this.$refs);
				// console.log(this.$refs.abc.count);
				// this.$refs.abc.fun()

				this.className.animate = true;
				if (this.style.backgroundColor == 'bisque') {
					this.style.backgroundColor = 'red'
				} else {
					this.style.backgroundColor = 'bisque'
				}

				this.isShow = !this.isShow;
				if (this.componentName == 'component-a') {
					this.componentName = 'component-b'
				} else {
					this.componentName = 'component-a'
				}
			},
			life(el, done) {
				const ani = setInterval(() => {
					if (el.style.backgroundColor == 'bisque') {
						el.style.backgroundColor = 'white'
					} else {
						el.style.backgroundColor = 'bisque'
					}
				}, 200)
				setTimeout(() => {
					clearInterval(ani)
					// 触发动画结束
					done()
				}, 5000)
			},
			endLife(el) {
				console.log('进入动画结束了');
			},
			addNum() {
				this.numList.unshift(this.numList[0] + 1)
			}
		}
	})
	app.component('abc', {
		data() {
			return {
				count: 22
			}
		},
		methods: {
			fun() {
				alert(123)
			}
		},

	})
	const vm = app.mount("#app")
</script>